<template>
  <div class="comment-list">
    <div v-for="comment in commentList" :key="comment.commentId" class="comment-item">
      <div class="comment-header">
        <span class="comment-author">{{ comment.userName }}</span>
        <span class="comment-time">{{ parseTime(comment.createTime) }}</span>
        <span class="comment-ip">{{ comment.userIp }}</span>
      </div>
      <div class="comment-content">
        {{ comment.content }}
      </div>
      <div class="comment-actions">
        <el-button 
          v-if="comment.status === '1'" 
          size="mini" 
          type="primary" 
          @click="handleApprove(comment)"
        >
          审核通过
        </el-button>
        <el-button 
          size="mini" 
          type="danger" 
          @click="handleDelete(comment)"
        >
          删除
        </el-button>
      </div>
    </div>
    <div v-if="commentList.length === 0" class="no-comments">
      暂无评论
    </div>
  </div>
</template>

<script>
import { auditComment, delComment } from '@/api/cms/comment'

export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      commentList: []
    }
  },
  watch: {
    comments: {
      handler(newVal) {
        this.commentList = newVal
      },
      immediate: true
    }
  },
  methods: {
    handleApprove(comment) {
      this.$confirm('是否确认审核通过该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return auditComment({
          commentId: comment.commentId,
          status: '0'
        })
      }).then(() => {
        this.$emit('refresh')
        this.msgSuccess('审核成功')
      }).catch(() => {})
    },
    handleDelete(comment) {
      this.$confirm('是否确认删除该评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return delComment(comment.commentId)
      }).then(() => {
        this.$emit('refresh')
        this.msgSuccess('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
}

.comment-author {
  font-weight: bold;
  color: #333;
}

.comment-time {
  margin: 0 10px;
}

.comment-content {
  margin-bottom: 10px;
  line-height: 1.6;
}

.comment-actions {
  text-align: right;
}

.no-comments {
  text-align: center;
  padding: 30px;
  color: #999;
}
</style>
